<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="60px"
    abel-width="60px"
  >


<!--    <el-card>-->
<!--    </el-card>-->
   <div>
     <label>即时滚动数据：</label>
     <div v-for="(input, index) in inputList" :key="index" style="margin-left: 5%;">
       <el-form-item :label="'标题 ' + (index + 1)">
         <el-input v-model="input.value" placeholder="请输入滚动标题" style="width: 30%;"></el-input>
<!--         <el-button type="danger" @click="removeInput(index)">删除</el-button>-->
         <el-button type="danger" style="margin-left: 3px;" @click="removeInput(index)" :icon="Delete" circle />
       </el-form-item>

     </div>
     <el-button @click="addInput" style="margin-left: 5%;">新增</el-button>

     <hr>
   </div>

    <div>
      <label>首页成交榜：</label>
<!--      <div style="margin-left: 5%;">-->
<!--        <el-table :data="tableData" style="width: 100%">-->
<!--&lt;!&ndash;          <el-table-column prop="userImg" label="头像" width="120" />&ndash;&gt;-->
<!--          <el-table-column label="头像" prop="userImg" align="center" width="150">-->
<!--            <template #default="scope">-->
<!--              <el-image-->
<!--                style="width: 100px; height: 100px;border-radius: 5px;"-->
<!--                :src="scope.row.userImg"-->
<!--              />-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column  prop="name" label="姓名" width="150" />-->
<!--          <el-table-column prop="title" label="标题" width="120" />-->
<!--          <el-table-column prop="info" label="详情页内容" width="120" />-->
<!--          <el-table-column fixed="right" label="操作" width="120">-->
<!--            <template #default ="scope">-->

<!--&lt;!&ndash;              <el-button link type="primary" size="small" @click="handleClick(scope.row.id)"&ndash;&gt;-->
<!--&lt;!&ndash;              >删除</el-button&ndash;&gt;-->
<!--&lt;!&ndash;              >&ndash;&gt;-->
<!--              <el-button @click="removeRow(scope.$index)" type="danger" size="mini">删除</el-button>-->

<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </div>-->

      <div style="margin-top: 2%">
        <el-button @click="addDataInput" style="margin-left: 5%;">新增</el-button>
      </div>

      <div v-for="(input, index) in tableListData" :key="index" style="margin-left: 5%;">
      <el-row align="middle" justify="left" style="margin-top: 1%;">

        <el-form-item label="头像" prop="userImg">
          <UploadImg v-model="input.userImg" />
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="input.name" placeholder="请输入姓名" />
        </el-form-item>

        <el-form-item label="标题" prop="title">
          <el-input v-model="input.title" placeholder="请输入标题" />
        </el-form-item>


        <el-button type="danger" style="margin-left: 3px;margin-top: -20px" @click="removeDataInput(index)" :icon="Delete" circle />


      </el-row>


<!--      <el-form-item label="详情页">-->
<!--        <Editor v-model="formData.info" height="150px" />-->
<!--      </el-form-item>-->
      </div>

    </div>




     <div style="margin-top: 2%;">
       <el-form-item>
         <el-button id="sbutton" type="primary"  @click="submitForm">保存</el-button>
       </el-form-item>

     </div>


  </el-form>

<!--  <div style="text-align: left">-->
<!--    <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>-->

<!--  </div>-->




</template>
<style>

/* 方法三：使用“position:absolute;”将按钮居中 */
#sbutton {
  display: block;
  margin: auto;
}

</style>

<script setup lang="ts">

import * as HomeApi from '@/api/hutai/home'
import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import type { UploadFile } from 'element-plus'

defineOptions({ name: 'HomeBanner' })
/** 提交表单 */
//const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const inputList = reactive([])  //项目

let dataInputList =  reactive([])
let dataTable = ref([])

const formData = ref({
  dataInputList: dataInputList,
  tableListData: [],
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref
const tableData = ref([])
const tableListData = ref ([{ userImg: '', name: '', title: '' }])

// const tableData = ref({
//   userImg: undefined,
//   name: undefined,
//   title: undefined,
//   info: undefined
// })

/** 查询列表 */
const getList = async () => {

  try {
    let list = await HomeApi.getHomeOneList()
    console.log(list.length);
    for (var i =0;i<list.length;i++){
      // inputList.push({value : list[i].title});
      inputList.push({value : list[i].title});
    }

    //加载用户成交榜
    tableListData.value = await HomeApi.getHomeTwoList()
  } finally {

  }
}

const addInput = async () => {
  // 点击新增按钮时，向inputList中添加一个新的输入框
  inputList.push({value: ''})
}

const addDataInput = async () => {
  // 点击新增按钮时，向inputList中添加一个新的输入框
  tableListData.value.push({ userImg: '', name: '', title: '' })
}

const removeDataInput = async (index) => {
  tableListData.value.splice(index, 1); // 删除指定索引的输入框
}

const removeInput = async (index) => {
  inputList.splice(index, 1); // 删除指定索引的输入框
}

const removeRow = async (index) => {
  tableData.value.splice(index,1);
}

const submitForm = async () => {
  for (var i =0;i<inputList.length;i++){
    dataInputList.push(inputList[i]);
  }
  formData.value.tableListData = tableListData.value
  //dataTable.value = tableData.value;
  console.log('表单数据提交:', formData);
  try {
    const data = formData.value
    await HomeApi.createData(data)
    message.success(t('common.updateSuccess'))
    //每2秒自执行
    setTimeout(function(){
      location.reload();
    },2000)
  } finally {

  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
